<template>
  <MainPage>
    <template #HeaderLeft>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        ref="userListFrom"
        label-width="90px"
      >
        <el-form-item label="用户：" prop="uid">
          <change-user-input
            ref="changeUserInput"
            @sendValue="(data) => getData(data, 1)"
            @clear="clear(1)"
          ></change-user-input>
        </el-form-item>

        <el-form-item label="类型：" prop="type">
          <el-select v-model.trim="form.type" placeholder="类型" class="wid220">
            <el-option label="所有" value=""></el-option>
            <el-option
              v-for="(item, index) in type_list"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select
            v-model.trim="form.status"
            placeholder="状态"
            class="wid220"
          >
            <el-option label="所有" value=""></el-option>
            <el-option
              v-for="(item, index) in status_list"
              :key="index"
              :label="item"
              :value="Number(index) + 1"
            ></el-option>
          </el-select>
        </el-form-item>
        <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="moredata">
        </MainFormBtn>

        <div class="more el-form-item" @click="moredata = !moredata">
          <span>更多</span>
          <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
        </div>
        <div class="clearfix"></div>
        <el-collapse-transition>
          <div v-if="moredata">
            <div>
              <el-form-item label="日期：" prop="send_time">
                <el-date-picker
                  v-model="send_time"
                  type="daterange"
                  class="time220"
                  :editable="false"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                />
              </el-form-item>
              <el-form-item label="司机：" prop="driver_id">
                <el-select
                  v-model.trim="form.driver_id"
                  placeholder="司机"
                  class="wid220"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option
                    v-for="(item, index) in driver"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="物品：" prop="goods_spu_id">
                <change-goods-input
                  ref="changeGoodsRef"
                  url="2"
                  @clear="clear(2)"
                  @sendValue="(data) => getData(data, 2)"
                ></change-goods-input>
              </el-form-item>
              <div class="clearfix"></div>
                <el-form-item label=" ">
                  <MainFormBtn class="btn-bottom" @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="!moredata">
                  </MainFormBtn>
                </el-form-item>
            </div>
          </div>
        </el-collapse-transition>
      </el-form>
      <div class="main-controls-wrap">
        <div>
          <el-button @click="returnDialogVisible = true"> 物品归还 </el-button>
          <el-button @click="lendDialogVisible = true"> 物品借出 </el-button>
        </div>
      </div>
    </template>
    <template #Table>
      <div class="main_table">
        <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        fit
        border
        highlight-current-row
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="单号"
          prop="order_sn"
          min-width="140"
        />
        <el-table-column
          label="类型"
          prop="nickname"
        >
          <template slot-scope="scope">
            <span :class="'type' + scope.row.type">{{
              type_list[scope.row.type]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="用户名称"
          prop="uid"
        >
          <template slot-scope="scope">
            {{ scope.row.member.nickname }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="nickname"
        >
          <template slot-scope="scope">
            <span :class="'status' + scope.row.status">{{
              status_list[scope.row.status]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="司机"
          prop="nickname"
        />
        <el-table-column
          label="备注"
          prop="remark"
        />
        <el-table-column
          label="提交时间"
          prop="nickname"
          min-width="140"
        >
          <template slot-scope="scope">
            {{ parseTime(scope.row.submit_time) }}
          </template>
        </el-table-column>
        <el-table-column
          label="管理操作"
          prop="nickname"
          fixed="right"
          width="150"
        >
          <template slot-scope="scope">
            <router-link :to="'/warehouse/turnOverRecord/see/' + scope.row.id">
              <el-link type="primary">查看</el-link>
            </router-link>
            <el-link
              v-if="scope.row.status == 0"
              type="danger"
              @click="handleCheck(scope.row)"
              >审核</el-link
            >
          </template>
        </el-table-column>
        </el-table>
      </div>
    </template>
    <template #Page>
      <MainPagination
        :current-page="current.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        background
        @size-change="changeLimit"
        @current-change="changePage"
      />
    </template>
    <template #Dialog>
      <record-lend
        :showDialog.sync="lendDialogVisible"
        @refresh="getArticleList"
      ></record-lend>
      <record-return
        :showDialog.sync="returnDialogVisible"
        @refresh="getArticleList"
      ></record-return>
      <record-check
        :showDialog.sync="checkDialogVisible"
        :id="checkId"
        @refresh="getArticleList"
      ></record-check>
    </template>
  </MainPage>
</template>
<script>
import MainPage from "@/components/MainPage";
import recordReturn from "./components/turnoverGoods/record_return.vue";
import recordLend from "./components/turnoverGoods/record_lend.vue";
import recordCheck from "./components/turnoverGoods/record_check.vue";
import { turnoverOrder_index } from "@/api/warehouse/warehouseTurnOrder";
import { parseTime } from "@/utils/index";
export default {
  name: "",
  components: {
    MainPage,
    recordReturn,
    recordLend,
    recordCheck,
  },
  data() {
    return {
      parseTime,
      form: {
        uid: "",
        type: "",
        status: "",
        start_time: "",
        end_time: "",
        driver_id: "",
        goods_spu_id: "",
      },
      send_time: [],
      list: [],
      status_list: [],
      type_list: [],
      driver: [],
      listLoading: false,
      moredata: false,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      lendDialogVisible: false,
      returnDialogVisible: false,
      checkDialogVisible: false,
      checkId: "",
    };
  },
  methods: {
    getArticleList() {
      this.current.page = 1;
      this.turnoverOrder_index();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.$refs["changeUserInput"].name = "";
      if (this.$refs["changeGoodsRef"]) {
        this.$refs["changeGoodsRef"].name = "";
      }
      this.send_time = [];
      this.getArticleList();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.turnoverOrder_index();
    },
    changePage(page) {
      this.current.page = page;
      this.turnoverOrder_index();
    },
    getData(data, type) {
      if (type == 1) {
        this.form.uid = data.id;
      } else if (type == 2) {
        this.form.goods_spu_id = data.goods_spu_id;
      }
    },
    clear(type) {
      if (type == 1) {
        this.form.uid = "";
      } else if (type == 2) {
        this.form.goods_spu_id = "";
      }
    },
    turnoverOrder_index() {
      this.listLoading = true;
      let data = Object.assign(this.form, this.current);
      if (this.send_time) {
        data.start_time = this.send_time[0];
        data.end_time = this.send_time[1];
      }

      turnoverOrder_index(data).then((res) => {
        if (res.errcode == 0) {
          this.status_list = res.data.status_list;
          this.type_list = res.data.type_list;
          this.driver = res.data.driver;
          this.list = res.data.list.data;
          this.totalCount = res.data.list.total;
        } else {
        }
        this.listLoading = false;
      });
    },
    handleCheck(row) {
      this.checkId = row.id;
      this.checkDialogVisible = true;
    },
  },
  created() {
    this.turnoverOrder_index();
  },
};
</script>
<style lang='scss' scoped>
.el-form-item {
  margin-bottom: 10px;
}
.type1 {
  color: #f56c6c;
}
.type2 {
  color: #03a98e;
}

.status0 {
  color: #03a98e;
}
.status1 {
  color: #118ab2;
}
.status2 {
  color: #cccccc;
}
</style>
